import React from "react"
import "../assets/css/play.css"
import "../assets/iconfont/musicControls/iconfont.css"
import Slider from "../public/Progressbar"
import { withRouter } from 'react-router-dom'

class Play extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      play: false,
      like: true,
      cyclicMode: ["iconfont icon--lbxh", "iconfont icon-danquxunhuan", "iconfont icon-suijibofang"],
      currentCyclic: 0,
      listmusicindex: null,
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    }
    this.audio = React.createRef()

    // 获取音乐id
    this.props.getMusicId(props.id)
  }

  // 更改当前播放状态
  handleplayorpause() {
    this.props.playOrPause(!this.props.audio)
  }

  // 是否点击喜欢
  handleLike() {
    this.setState({
      like: !this.state.like
    })
  }

  // 切换循环方式
  cyclicMode() {
    let currentCyclic = this.state.currentCyclic
    // 切换图标
    if (++this.state.currentCyclic >= 3) {
      currentCyclic = 0
    } else {
      currentCyclic++
    }
    this.setState({
      currentCyclic: currentCyclic
    })

    // 切换状态
    if (this.props.cycle === 'list') {
      //从列表循环改为单曲
      this.props.changeCycle('only')
    } else if (this.props.cycle === 'only') {
      //从单曲变为随机
      this.props.changeCycle('random')
    } else {
      //随机=>列表
      this.props.changeCycle('list')
    }

  }

  // 上一曲
  previous() {
    //清除以播放的时长
    this.props.clearTimenow()
    // setTimeout(() => {
    let { getNowMusicindex, listmusicindex } = this.props
    //   if (listmusicindex === 0) {
    //     return
    //   } else {
    //     this.setState({
    //       listmusicindex: this.state.listmusicindex - 1
    //     })
    //   }
    //   setTimeout(() => {
    //     getNowMusicindex(this.state.listmusicindex)
    //   }, 30)
    // }, 30)
    let index = listmusicindex
    let max = 1
    try {
      max = this.props.playmusiclist.length
    } catch (e) {
    }
    if (index === 0) {
      index = max
    } else {
    }
    getNowMusicindex(index - 1)
  }
  // 下一曲
  next() {
    //清除以播放的时长
    this.props.clearTimenow()
    let { getNowMusicindex, listmusicindex, playmusiclist } = this.props
    // if (listmusicindex === (playmusiclist.length - 1)) {
    //   this.setState({
    //     listmusicindex: 0
    //   })
    // } else {
    //   this.setState({
    //     listmusicindex: this.state.listmusicindex + 1
    //   })
    // }
    // setTimeout(() => {
    //   getNowMusicindex(this.state.listmusicindex)
    // }, 30)
    let index = listmusicindex
    let max = 100000000
    try {
      max = this.props.playmusiclist.length - 1
    } catch (e) {

    }
    if (index === max) {
      index = -1
    } else {

    }
    getNowMusicindex(index + 1)
  }

  // 调用列表出现
  handleChangeShowPlay() {
    this.props.changeShowplaylist(!this.props.showplaylist)
  }

  // 点击返回时关闭当前页面
  closedPlay() {
    this.props.changeShowplay(false)
  }

  // 跳转到评论路由
  toComment() {
    // console.log(this.props)
    this.props.changeShowplay(false)
    this.props.history.push("/comment")
  }

  render() {
    let circle = 'play--recordPlayer__cd'
    if (!this.props.audio) {
      circle = 'play--recordPlayer__cd play--recordPlayer__cd2'
    }
    if (this.props.showPlay) {
      let { playmusiclist, listmusicindex } = this.props
      return (
        <div
          className='maxPlay'
          style={{
            width: `${this.state.width}px`,
            height: `${this.state.height}px`
          }}>
          <div
            className='play--container'
            style={{
              backgroundImage: `url(${playmusiclist[listmusicindex].al.picUrl})`,
              width: `${this.state.width}px`,
              height: `${this.state.height}px`
            }}>
            <div
              className='play--recordPlayer'
              style={{
                width: `${this.state.width}px`,
                height: `${this.state.height}px`
              }}>
              <div className={circle}>
                <img className='play--recordPlayer__disc'
                  src={'https://s3.music.126.net/mobile-new/img/disc-ip6.png?69796123ad7cfe95781ea38aac8f2d48='} />
                <img className='play--recordPlayer__discView'
                  src={playmusiclist[listmusicindex].al.picUrl} />
              </div>
              <div className='play--lyrics'>
                <h4 className='play--lyrics__musicname'>
                  <span className='play--lyrics__songName'>{playmusiclist[listmusicindex].name}</span>
                  <span className='play--lyrics__separator'> - </span>
                  <span className='play--lyrics__author'>{playmusiclist[listmusicindex].ar[0].name}</span>
                </h4>
                <ul className="play--lyrics__list">
                  <li className="play--noLyrics">暂无歌词</li>
                </ul>
              </div>
            </div>
            <div className='play--load'>
              <div className='play--arrow'></div>
            </div>
            {/* <Audio {...this.props} /> */}
            {/* 播放区域 */}
            <div className='play--musicControls'>
              <ul className='play--musicControls__container'>
                <li>
                  <span className={this.state.like ? "iconfont icon-xihuan-kongpt" : "iconfont icon-xihuan"} onClick={() => this.handleLike()}></span>
                </li>
                <li>
                  <span className='iconfont icon-xiazaipt'></span>
                </li>
                <li>
                  <span className="iconfont icon-jingyunyinxiaopt"></span>
                </li>
                <li>
                  <span className="iconfont icon-pinglunpt" onClick={() => this.toComment()}></span>
                </li>
                <li>
                  <span className="iconfont icon-xinxipt"></span>
                </li>
              </ul>
              <Slider {...this.props} />
              <ul className='play--musicControls__container'
                style={{ marginTop: '120px' }}
              >
                <li>
                  <span
                    className={this.state.cyclicMode[this.state.currentCyclic]}
                    onClick={this.cyclicMode.bind(this)}></span>
                </li>
                <li>
                  <span className="iconfont icon-shangyiqu" onClick={() => this.previous()}></span>
                </li>
                <li>
                  <span
                    className={this.props.audio ? "iconfont icon-bofang iconfontSize135" : "iconfont icon-zanting iconfontSize135"}
                    onClick={() => this.handleplayorpause()}>
                  </span>
                </li>
                <li>
                  <span className="iconfont icon-xiayiqu" onClick={() => this.next()}></span>
                </li>
                <li>
                  <span className="iconfont icon-caidan" onClick={this.handleChangeShowPlay.bind(this)}></span>
                </li>
              </ul>
            </div>
            <div className="play--return">
              <span className="iconfont icon-fanhuipt" onClick={() => this.closedPlay()}></span>
            </div>
          </div>
        </div>
      )
    } else {
      return null;
    }
  }
}



export default withRouter(Play)